<template>
  <div class="order-list-view view-container">
    <div class="main-content">
      <div class="list-container">

        <div>
          <el-form
                  label-width="100px"
                  :inline="true"
                  :model="formData"
                  label-position="right"
                  size="small"
                  class="filter-form-inline"
          >
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="订单状态" style="width: 100%">
                  <el-select
                          v-model="formData.orderStatus"
                          clearable
                          style="width: 100%"
                          placeholder="请选择订单状态"
                          @change="listSearch"
                  >
                    <el-option
                            v-for="(item, idx) in orderStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="职责" style="width: 100%">
                  <el-select
                          v-model="formData.selectType"
                          clearable
                          style="width: 100%"
                          placeholder="职责"
                          @change="selectChange"
                  >
                    <el-option
                            v-for="(item, idx) in selects"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item style="width: 100%">
                  <more-search-btn v-model:is-more="visible" style="margin-left:10px"/>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item style="width: 100%">
                  <el-button
                          class="border-btn"
                          @click="orderReset"
                  >重置</el-button>
                  <el-button
                          type="primary"
                          class="main-btn"
                          @click="listSearch"
                  >搜索</el-button>
                </el-form-item>
              </el-col>

              <template v-if="visible">
                <el-col :span="6" v-if="formData.selectType != 1">
                  <el-form-item label="负责营销职员" style="width: 100%">
                    <el-select
                            v-model="formData.headId"
                            clearable
                            style="width: 100%"
                            placeholder="负责营销职员"
                            @change="listSearch"
                    >
                      <el-option
                              v-for="(item, idx) in heads"
                              :key="item.id"
                              :label="item.realName"
                              :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="代理名称" style="width: 100%">
                    <el-input
                            v-model="formData.agentName"
                            placeholder="请输入代理名称"
                    />
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="创建时间" style="width: 100%">
                    <date-range-picker
                            v-model:date="formData.date"
                            style="width: 100%"
                            type="daterange"
                            clearable
                            range-separator="-"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                    />
                  </el-form-item>
                </el-col>
              </template>

            </el-row>

          </el-form>
          <table-tools>
            <template #left>
              <el-button
                v-auth="{v:['crm:order:terminal:pms']}"
                class="main-btn"
                size="small"
                type="primary"
                @click="addClick"
              >新建订单</el-button>
            </template>
          </table-tools>
        </div>

        <table-view
                :visible="visible"
          :data="tableData"
          @sort-change="createChange"
          @row-click="rowClick"
        >
          <el-table-column
            prop="order.orderNumber"
            label="订单编号"
            fixed="left"
            width="100"
            align="center"
            header-align="center"
            show-overflow-tooltip
          />
          <el-table-column
            label="终端名称"
            align="left"
            :min-width="150"
            header-align="center"
            show-overflow-tooltip
          >
            <template #default="scope">
              <span v-if="scope.row.order && scope.row.order.orderType == 1">{{ scope.row.order.distributeName }}</span>
              <span v-else-if="scope.row.order">{{ scope.row.order.terminalName }}</span>
            </template>
          </el-table-column>
          <el-table-column
                  label="终端类型"
                  align="center"
                  :min-width="100"
                  header-align="center"
          >
            <template #default="scope">
              <span >{{ getLabel('app_mode',scope.row.order.terminalType) }}</span>
            </template>
          </el-table-column>
<!--          <el-table-column-->
<!--            prop="order.agentName"-->
<!--            label="渠道客户名称"-->
<!--            :min-width="150"-->
<!--            align="left"-->
<!--            show-overflow-tooltip-->
<!--            header-align="center"-->
<!--          />-->
          <el-table-column
            label="订单产品"
            :min-width="150"
            header-align="center"
          >
            <template #default="scope">
              <product-popor :list="scope.row.orderDetail" />
            </template>
          </el-table-column>
          <el-table-column
                  label="订单总金额（元）"
                  :min-width="150"
                  align="right"
                  header-align="center"
          >
            <template #default="scope">
              <span>{{getTotal(scope.row)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            sortable="custom"
            label="下单日期"
            :min-width="120"
            align="center"
            header-align="center"
          >
            <template #default="scope">
              {{ dateFormat('yyyy-mm-dd',scope.row.order.putOrderTime) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="order.headName"
            label="负责营销职员"
            :min-width="120"
            align="center"
            header-align="center"
          />
          <el-table-column
            sortable="custom"
            prop="processNo"
            label="创建时间"
            :min-width="150"
            align="center"
            header-align="center"
          >
            <template #default="scope">
              {{ dateFormat('yyyy-mm-dd HH:MM',scope.row.order.createdAt) }}
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            fixed="right"
            align="center"
            :min-width="150"
            header-align="center"
          >
            <template #default="scope">
              <div class="tab-line">
                <div>{{ getStatus(scope.row) }}</div>
                <!--                                <div-->
                <!--                                        v-if="scope.row.order&&scope.row.order.flowStatus!=='AGREE'&&scope.row.order.flowStatus!=='REFUSE'"-->
                <!--                                        class="flow-status-color"-->
                <!--                                >{{ getLabel('approval_result',scope.row.order.flowStatus) }}</div>-->
              </div>

            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            header-align="center"
            min-width="200"
          >
            <template #default="scope">
              <div v-if="scope.row.order.flowStatus != 'DOING'">
                <el-button
                  v-auth="{v:['crm:order:terminal:pms'],bool:scope.row.order.orderStatus == 2}"
                  type="text"
                  @click.stop="onCancel(scope.row)"
                >取消订单</el-button>
                <el-button
                  v-auth="{v:['crm:order:terminal:pms'],bool:scope.row.order.orderStatus == 0 || scope.row.order.orderStatus == 5 || scope.row.order.orderStatus == -1}"
                  class="delete-text-btn"
                  type="text"
                  @click.stop="onDelete(scope.row)"
                >删除</el-button>
                <el-button
                  v-auth="{v:['crm:order:terminal:pms'],bool:scope.row.order.orderStatus == 0 || scope.row.order.orderStatus == -1}"
                  type="text"
                  @click.stop="onEdit(scope.row)"
                >编辑</el-button>

              </div>

              <!--                            <el-button type="text">删除</el-button>-->
            </template>
          </el-table-column>

        </table-view>

        <Pagination
          v-model:page="formData.page"
          v-model:limit="formData.pageSize"
          style="display: flex; justify-content: flex-end"
          :total="total"
          @pagination="getList"
        />

      </div>
    </div>

  </div>
</template>

<script>
import {isInteger} from "../../../../../../utils/validate";
import orderList from '../../../../mixins/orderList'
import {defineComponent, defineAsyncComponent, toRefs} from 'vue'

export default defineComponent({
  name: 'Index',
  components: {
    productPopor:defineAsyncComponent(()=>import('../../order/list/modules/productPopor.vue'))
  },
  setup() {
    const order = orderList('terminal')

    const getTotal = (row) => {
      let total = 0
      if (row.orderDetail && row.orderDetail.length){

        row.orderDetail.forEach(a=>{
          total += a.totalAmount
        })
      }
      return total ? isInteger(total) : ''
    }

    return {
      ...toRefs(order),

      getTotal,
    }
  },
})
</script>

<style scoped>
</style>
